<template>
  <div class="lyric">
    <div class="content">
      <!-- 歌词 -->
      <div class="song-text">
        <div class="song-box" :style="don">
          <div
            class="song-lrc"
            ref="barparent"
            v-for="(item, index) in geci"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Lyric",
  data() {
    return {
      Lyric: "",
      geci: [],
      don: {
        marginTop: "300px",
      },
      songlrc : '',
    };
  },
  created() {
    this.gai();
    this.LyricOne();
  },
  methods: {
    LyricOne() {
      setTimeout(() => {
        //保存歌词
        let lrc = this.Lyric.split(/\n/);
        // console.log(lrc);
        lrc.forEach((v, i) => {
          if (v.length === 0) {
            return;
          }
          let lrcData = v.split(/\] ?/);
          // console.log('lrcData==>',lrcData);
          //时间
          let time = lrcData[0].slice(1).split(/:/);
          // console.log('time==>',time);
          let minutes = Number(time[0]);
          // console.log('minutes==>',minutes);
          let seconds = Number(time[1]);
          // console.log('seconds==>',seconds);
          time = Number((minutes * 60 + seconds).toFixed(2));
          // console.log("time==>", time);
          let text = lrcData[1];
          // console.log("text==>", text);
          this.geci.push(text);
        });
        // console.log(this.geci);
        this.LyricTwo();
      }, 1000);
    },
    gai() {
      setInterval(() => {
        this.Lyric = this.$store.state.Lyric;
        // console.log(this.Lyric);
      }, 200);
    },
    LyricTwo() {
      setTimeout(() => {
        let songlrc = document.querySelector(".song-lrc");
        this.songlrc = songlrc.offsetHeight;
        console.log("songlrc==>", songlrc.offsetHeight);
      }, 2000);
    },
  },
};
</script>

<style lang="less" scoped>
.lyric {
  width: 950px;
  height: 500px;
  background-color: rgb(255, 255, 255);
  .content {
    background-color: #999;
    width: 100%;
    height: 100%;
  }
  .song-text {
    width: 540px;
    height: 500px;
    background-color: #fff;
    margin: auto;
    z-index: 2;
    overflow: hidden;
  }

  .song-box {
    text-align: center;
    position: relative;
    /* top: 186px; */
  }
  .song-lrc {
    padding: 5px 0;
    color: #444;
  }

  .song-lrc.active {
    color: #e4393c;
  }
}
</style>